<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="expires" content="0" />
        <script src="js/jquery.js"></script>
        <meta charset="utf-8" />
        <title>上传文件</title>
        <script language="javascript">
            function check() {
                if (document.formAdd.fujian.value == "") {
                    alert("请选择文件");
                    return false;
                }
                return true;
            }
        </script>

        <script>
            /**
             * 获取剪贴板中的图片
             * @param e event事件
             * @returns {any}
             */
            function getPasteImage(e) {
                var ret = false;
                if (e.clipboardData && e.clipboardData.items) {
                    for (var i = 0; i < e.clipboardData.items.length; i++) {
                        if (/^image\//.test(e.clipboardData.items[i].type)) {
                            ret = true;
                            break;
                        }
                    }
                }
                return ret ? e.clipboardData.items : null;
            }

            /**
             * 获取拖动的文件
             * @param e 事件
             * @returns {any}
             */
            function getDropImage(e) {
                return e.dataTransfer && e.dataTransfer.files ? e.dataTransfer.files : null;
            }

            /**
             * ajax方式发送文件
             * @param file
             */
            function sendAndInsertImage(file) {
                //构建模拟数据
                var fd = new FormData();
                //  设置fujian 文件
                fd.append("fujian", file, file.name || "blob." + file.type.substr("image/".length));
                //  设置 类型为 ajax
                fd.append("type", "ajax");
                // 创建ajax 对象
                var xhr = new XMLHttpRequest();

                // 设置为post 提交
                xhr.open("post", $("#uploadForm").attr("action"), true);
                // 设置提交头
                xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

                // 加载完成后，返回数据
                xhr.addEventListener("load", function (e) {
                    try {
                        // 将结果写入 body 中
                        var data = e.target.response;
                        $("body").html(data);
                    } catch (er) {}
                });
                xhr.send(fd);
            }

            /**
             * 获取url 参数
             * @param name
             * @returns {string|null}
             * @constructor
             */
            function GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }

            $(function () {
                var urlParam = "";
                // 获取result 参数 不为null
                if (GetQueryString("result")) {
                    // 设置成功上传后提交这个文件
                    urlParam += "Result=" + GetQueryString("result");
                } else {
                    // 设置成功上传后提交这个文件
                    urlParam += "callback=" + GetQueryString("callback");
                }
                // 设置form 表单提交路径
                document.getElementById("uploadForm").setAttribute("action", "./upload_re.jsp?" + urlParam);

                // 检测是否支持html5方式上传
                if (window.FormData && window.FileReader) {
                    // 支持则显示下面的文字
                    $("#copyUpload").show();

                    // 监听拖拽事件和 粘贴事件
                    $("#copyUpload").on("dragover drop paste", function (e) {
                        if (e.type == "dragover")
                            if (e.originalEvent.dataTransfer.types[0] == "Files") {
                                e.preventDefault();
                                return false;
                            }
                        e.preventDefault();
                        var hasImg = true,
                            items;

                        //获取粘贴板文件列表或者拖放文件列表
                        items = e.type == "paste" ? getPasteImage(e.originalEvent) : getDropImage(e.originalEvent);
                        console.log(items);
                        if (items) {
                            var len = items.length,
                                file;

                            // 将获取到的数据 使用ajax 方式提交给后台
                            while (len--) {
                                hasImg = true;
                                file = items[len];
                                if (file.getAsFile) file = file.getAsFile();
                                if (file && file.type && /^image\//.test(file.type) && file.size > 0) {
                                    sendAndInsertImage(file);
                                    hasImg = true;
                                }
                            }
                        }
                    });
                }
            });
        </script>
    </head>

    <body>
        <form id="uploadForm" action="javascript:;" name="formAdd" method="post" enctype="multipart/form-data">
            <input type="file" name="fujian" id="fujian" onKeyDown="javascript:alert('此信息不能手动输入');return false;" />
            <input type="submit" value="提交" onClick="return check()" />
        </form>
        <div id="copyUpload" style="display: none" contenteditable="true" readonly="readonly">点我 Ctrl + v 上传截图，不懂截图？按Ctrl+Alt+A或者Alt+A进行截图</div>
    </body>
</html>
